<template>
  <div class="calender-container">
    <van-nav-bar title="添加日子" fixed>
      <template #left>
        <span @click="$router.back()">
        <svg-icon style="margin-left: 10px;" icon-class='fanhui' width="30px" height="30px" class="icon"/>
        </span>
      </template>
    </van-nav-bar>
    <!-- 日历部分 -->
    <div class="calender-wrap">
      <DatePicker
        is-expanded
        color="pink"
        ref="calendar"
        :attributes='attrs'
        v-model="selectedDate"
        @input="handleSelected"
      />
    </div>
    <!--    <button @click="test">test</button>-->

    <!-- 弹出层 -->
    <van-dialog
      v-model="isAddShow"
      title="添加纪念日"
      show-cancel-button
      @confirm="confirmMemoryDay"
      confirm-button-color="#ac92eb"
      className="togetherDialog"
    >
      <template #title>
        {{ clickType ? '添加日子' : '修改内容' }}
      </template>
      <span class="deleteBtn" @click="deleteFn" v-if="!clickType">
        <svg-icon style="margin-left: 10px;" icon-class='shanchu' width="21px" height="21px" class="icon"/>
      </span>
      <van-field v-model="dayName" label="名称"/>
      <van-field
        readonly
        clickable
        name="datetimePicker"
        :value="dayDate"
        label="日期"
        @click="showPicker = true"
      />
      <van-field
        v-model="dayDesc"
        rows="3"
        autosize
        label="描述信息"
        type="textarea"
        maxlength="50"
        placeholder="可以描述一些有意思的细节"
        show-word-limit
      />

    </van-dialog>
    <!--日期选择器-->
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        v-model="currentValue"
        @confirm="confirmDate"
        @cancel="showPicker = false"
      />
    </van-popup>
    <!-- 滑动条 -->
    <div class="switch-wrap">
      纪念日
      <van-switch
        :value="checked"
        @input="onInput"
        size="18px"
        active-color="#ac92eb"
        inactive-color="#ec87c0"
      />
      记事
    </div>
    <!-- 时间轴 -->
    <!-- 纪念日 -->
    <van-steps direction="vertical" @click-step="handleSelected">
      <van-step v-for="item in memoryList" :key="item.mem_id" v-show="!checked">
        <div class="hasDay">{{ convertTime(item.date) }}<span>day</span></div>
        <div class="content">
          <div class="title">{{ item.title }}</div>
          <div class="desc">{{ item.desc }}</div>
          <div class="date">{{ item.date }}</div>
        </div>
      </van-step>

      <!-- 记事 -->
      <van-step v-for="item in willDoList" :key="item.mem_id" v-show="checked">
        <div class="hasDay willDay"><span>剩余</span>{{ Math.abs(convertTime(item.date)) }}<span>day</span></div>
        <div class="content">
          <div class="title">{{ item.title }}</div>
          <div class="desc">{{ item.desc }}</div>
          <div class="date">{{ item.date }}</div>
        </div>
      </van-step>
    </van-steps>
  </div>
</template>

<script>
import DatePicker from 'v-calendar/lib/components/date-picker.umd'
import { valentineDay } from './valentineDay'
import dayjs from 'dayjs'
import { addMemoryAPI, deleteMemoryAPI, getMemoryAPI, updateMemoryAPI } from '@/api'
import { Dialog } from 'vant'

export default {
  name: 'calenderIndex',
  components: {
    DatePicker
  },
  data () {
    return {
      todos: valentineDay,
      selectedDate: null,
      isAddShow: false,
      dayName: '',
      dayDate: '',
      dayDesc: '',
      showPicker: false,
      minDate: new Date(1945, 0, 1),
      maxDate: new Date(),
      checked: false,
      memoryList: [],
      willDoList: [],
      currentValue: new Date(),
      clickType: true,
      deleteId: 0
    }
  },
  created () {
    this.getUserMemory()
  },
  methods: {
    async test () {
      const calendar = this.$refs.calendar
      await calendar.move({ month: 1, year: 1983 })
    },
    // 区分日历与时间轴的点击事件
    handleSelected (date) {
      this.dayName = ''
      this.dayDesc = ''
      if (typeof date === 'object') {
        this.clickType = true
        this.dayDate = dayjs(date).format('YYYY-MM-DD')
      } else {
        this.clickType = false
        if (this.checked) {
          this.deleteId = this.willDoList[date - this.memoryList.length].mem_id
          this.dayDate = this.willDoList[date - this.memoryList.length].date
          this.dayName = this.willDoList[date - this.memoryList.length].title
          this.dayDesc = this.willDoList[date - this.memoryList.length].desc
        }
        if (!this.checked) {
          this.deleteId = this.memoryList[date].mem_id
          this.dayDate = this.memoryList[date].date
          this.dayName = this.memoryList[date].title
          this.dayDesc = this.memoryList[date].desc
        }
      }
      this.isAddShow = true
    },
    // 弹出框--确认键
    async confirmMemoryDay () {
      // 添加纪念日
      if (this.clickType) {
        try {
          await addMemoryAPI({
            title: this.dayName,
            date: this.dayDate,
            desc: this.dayDesc
          })
          await this.getUserMemory()
          this.dayName = ''
          this.dayDesc = ''
        } catch (err) {
          console.log(err)
        }
      } else {
        // 更新纪念日
        console.log('222')
        try {
          const res = await updateMemoryAPI({
            title: this.dayName,
            date: this.dayDate,
            desc: this.dayDesc,
            mem_id: this.deleteId
          })
          await this.getUserMemory()
          console.log(res)
        } catch (err) {
          console.log(err)
        }
      }
    },
    confirmDate (value) {
      this.dayDate = dayjs(value).format('YYYY-MM-DD')
      this.showPicker = false
      console.log(this.dayDate)
    },
    async getUserMemory () {
      try {
        const { data } = await getMemoryAPI()
        this.willDoList = data.filter(item => this.convertTime(item.date) < 0).reverse()
        this.memoryList = data.filter(item => this.convertTime(item.date) >= 0).reverse()
        console.log(this.memoryList)
      } catch (err) {
        console.log(err)
      }
    },
    deleteFn () {
      Dialog.confirm({
        title: '确定删除吗？'
      })
        .then(async () => {
          // on confirm
          console.log(this.deleteId)
          await deleteMemoryAPI(this.deleteId)
          this.$toast.success('删除成功！')
          await this.getUserMemory()
          this.isAddShow = false
        })
        .catch(() => {
          // on cancel
        })
    },
    onInput (checked) {
      this.checked = checked
    },
    convertTime (date) {
      return dayjs().diff(date, 'day')
    }
  },
  computed: {
    dayjs () {
      return dayjs
    },
    attrs () {
      return [
        {
          key: 'today',
          highlight: {
            color: 'purple',
            fillMode: 'outline'
          },
          dates: new Date()
        },
        ...this.todos.map(todo => ({
          dates: todo.dates,
          dot: {
            color: todo.color,
            class: todo.isComplete ? 'opacity-75' : ''
          },
          popover: {
            label: todo.description,
            visibility: 'hover'
          },
          customData: todo
        }))
      ]
    }
  }

}
</script>

<style scoped lang="less">
.calender-container {
  background-color: #fff;
  height: 100vh;

  .van-nav-bar {
    background-color: #fff;
    z-index: 3;
    height: 80px;

    &::after {
      border: none;
    }
  }

  .calender-wrap {
    padding-top: 50px;
    height: 275px;

    .vc-container {
      position: fixed;
      margin: auto;
      border-radius: unset;
      border: none;
      z-index: 3;
      padding: 0 30px 13px;

      ::v-deep .vc-weeks {
        padding: 15px 30px 0px;
      }
    }
  }

  .switch-wrap {
    position: fixed;
    right: 10%;
    top: 46%;
    z-index: 4;
    font-size: 12px;

    .van-switch {
      margin-top: 3px;
      width: 3.5em;
      height: 0.5em;

      ::v-deep .van-switch__node {
        width: 0.8em;
        height: 0.8em;
        top: -30%;

      }

      ::v-deep.van-switch--on .van-switch__node {
        transform: translateX(2.8em);

      }
    }
  }

  .van-step {
    color: unset;
  }

  ::v-deep .van-steps {
    color: black;

    .van-steps__items {
      padding-right: 15px;

      .van-hairline {
        padding: 18px 0 10px
      }
    }

    .van-step__title {
      display: flex;
      align-items: center;

      .hasDay {
        color: #ec87c0;
        font-size: 30px;
        font-weight: bold;
        padding-right: 15px;
        margin-right: 5px;

        span {
          font-size: 14px;
          font-weight: normal;
        }
      }

      .content {
        font-size: 12px;

        .title {
          font-size: 15px;
          font-weight: 700;
          margin-bottom: 15px;
          word-break: break-all;
          letter-spacing: 1px;
          font-family: "微软雅黑 Light", serif;
        }

        .desc {
          margin-bottom: 15px;
          opacity: .6;
        }
      }
    }
  }

  ::v-deep .van-icon-checked:before {
    content: '';
    width: 20px;
    height: 20px;
    background: url("@/assets/track.png") no-repeat center;
    background-size: cover;
  }

  ::v-deep .van-step__title--active {
    color: black;

    .hasDay {
      color: #ec87c0;
    }

    .content {
      .title {
        letter-spacing: 1px;
      }
    }
  }

  ::v-deep .van-step__circle {
    width: 20px;
    height: 20px;
    background: url("@/assets/track.png") no-repeat center;
    background-size: cover;
  }

  .deleteBtn {
    position: absolute;
    top: 22px;
    left: 8px;
  }
}
</style>
